import 'dart:async';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:sph_driver/Main/MyWallet/BindingSuccessful.dart';

import '../../AppConfig/Config.dart';
import '../../http/NoLoadingPostApi.dart';
import '../../http/api.dart';
import '../../l10n/messages.dart';

class VerifyCardMobile extends StatefulWidget {
  const VerifyCardMobile({super.key});

  @override
  State<VerifyCardMobile> createState() => _VerifyCardMobileState();
}

class _VerifyCardMobileState extends State<VerifyCardMobile> {
  @override
  Widget build(BuildContext context) {
    var messages = AppLocalizations.of(context)!;
    final screenSize = MediaQuery.of(context).size;
    return Scaffold(
      backgroundColor: MyColors.backgreyColor,
      appBar: AppBar(
        leading: IconButton(
          icon: Icon(Icons.arrow_back_ios, color: Colors.black),
          onPressed: () => Navigator.of(context).pop(),
        ),
        backgroundColor: Colors.white,
        centerTitle: true,
        title: Text('验证银行卡预留手机号',style: TextStyle(color: Colors.black,fontWeight: FontWeight.w300,fontSize: 16.sp),),
      ),
      body:  Column(
          children: [
      Expanded(child: ListView(
        children: [
          Container(
            margin: EdgeInsets.only(top: 8.h,left: 10.w,right: 10.w),
            padding: EdgeInsets.only(top: 14.h,left: 10.w,right: 10.w,bottom: 14.h),
            decoration: BoxDecoration(
              color:Colors.white,
              borderRadius: BorderRadius.all(Radius.circular(10)),
            ),
            child: Column(
              children: [
                Row(
                  children: [
                    Text("手机号",style: TextStyle(color: Colors.black,fontSize: 14.sp),),
                    SizedBox(width: 10.w,),
                    Text("123******99",style: TextStyle(color: Colors.black,fontSize: 13.sp),),
                  ],
                ),
                SizedBox(height: 14.h,),
                Container(
                  height: 1.h,
                  color: MyColors.backgreyColor,
                ),
                SizedBox(height: 14.h,),
                Row(
                  children: [
                    Text("验证码",style: TextStyle(color: Colors.black,fontSize: 14.sp),),
                    SizedBox(width: 10.w,),
                    Container(
                      width: screenSize.width-200.w,
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Container(
                            width:100.w,
                            // height: 30.h,
                            child:TextField(
                              decoration: InputDecoration(
                                hintText: '填写验证码',
                                hintStyle:TextStyle(fontSize: 14.sp,color: MyColors.hintColor),
                                filled: true,
                                fillColor:Colors.white,
                                border: InputBorder.none,
                                alignLabelWithHint: true,
                                // contentPadding: EdgeInsets.symmetric(vertical: 6.0.h, horizontal: 0.0.w),
                              ),
                              keyboardType: TextInputType.number,
                              textAlign: TextAlign.left,
                              style: TextStyle(color: Colors.black),
                              onChanged: (value) {
                                setState(() {
                                  print(value);
                                });
                              },
                            ),
                          ),


                        ],
                      ),
                    ),
                    TimerCode(phoneNumber: "11111111111"),
                  ],
                )
              ],
            ),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              TextButton(onPressed: (){
                showModalBottomSheet(context: context, builder: (BuildContext context)
                {
                  return Container(
                    height: 240.h,
                    decoration: BoxDecoration(
                        color:Colors.white,
                        borderRadius: BorderRadius.all(Radius.circular(10))),
                    padding: EdgeInsets.only(top: 18.h,left: 15.w,right: 15.w,bottom: 65.h),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Text("收不到验证码？",style: TextStyle(color: Colors.black,fontSize: 16.sp,fontWeight: FontWeight.w600),),
                            GestureDetector(
                              child: Icon(Icons.close,color: MyColors.textColor,),
                              onTap: (){
                                Navigator.pop(context);
                              },
                            ),
                          ],
                        ),
                        SizedBox(height: 10.h,),
                        Text("验证码将由银行发送到您的手机号上",style: TextStyle(color: MyColors.textColor,fontSize: 13.sp),),
                        SizedBox(height: 10.h,),
                        Text("1.如收不到验证码，请确认手机号是否为银行预留手机号码，如非银行预留手机号，请联系银行客服咨询。",style: TextStyle(color:Colors.black,fontSize: 13.sp),),
                        SizedBox(height: 4.h,),
                        Text("2.如预留手机号已停用，请联系银行客服处理。",style: TextStyle(color:Colors.black,fontSize: 13.sp),),
                        SizedBox(height: 4.h,),
                        Text("3.请检查短信是否被手机安全软件拦截。",style: TextStyle(color:Colors.black,fontSize: 13.sp),),
                      ],
                    ),
                  );
                });
              }, child: Text("收不到验证码?",style: TextStyle(color: MyColors.themeColor,fontSize: 13.sp),)),
            ],
          ),

        ],
      ),
      ),
            Container(
              height: 80.h,
              color: Colors.white,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Container(
                      height: 40.h ,
                      margin: EdgeInsets.only(left: 30.w,right: 30.w),
                      decoration: BoxDecoration(
                          color:MyColors.themeColor,
                          borderRadius: BorderRadius.all(Radius.circular(30))),

                      width: double.infinity,


                      child: TextButton(
                        child: Text(messages["提交"],style: TextStyle(color: Colors.white,fontSize: 14.sp,fontWeight: FontWeight.w600),),

                        onPressed: (){
                          Navigator.push(context,
                              MaterialPageRoute(builder: (context) {
                                return BindingSuccessful(

                                );
                              }));

                        },
                      )
                  ),
                ],
              ),
            ),
        ],
      ),

    );
  }
}
class TimerCode extends StatefulWidget {
  final String phoneNumber;
  const TimerCode({super.key, required this.phoneNumber});

  @override
  State<TimerCode> createState() => _TimerCodeState();
}

class _TimerCodeState extends State<TimerCode> {
  late Timer _timer;
  int curentTimer=60;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _timer =Timer.periodic(Duration(milliseconds: 1000), (timer) {
      curentTimer--;
      if (curentTimer ==0){
        _timer.cancel();
        print(widget.phoneNumber);
      }
      setState(() {

      });
    });
  }
  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    _timer.cancel();

  }
  @override
  Widget build(BuildContext context) {
    return   Container(
        height: 25.h ,
        width:100.w,
        // margin: EdgeInsets.only(left: 30.w,right: 30.w),
        decoration: BoxDecoration(
            color: curentTimer > 0?Color.fromRGBO(223, 223, 223, 1):Color.fromRGBO(231, 112, 27, 0.85),
            borderRadius: BorderRadius.all(Radius.circular(30))),

        child: Center(
          child: GestureDetector(
            child: curentTimer > 0?Text(curentTimer.toString() +"s",style: TextStyle(color: Colors.white,fontSize: 14.sp),)
                :Text("重新发送",style: TextStyle(color: Colors.white,fontSize: 14.sp),),
            onTap: (){
              NoLoadingApiManager.postData(
                context,
                'api/auth/sms/sendPhoneValidCode',
                {
                  "phone": widget.phoneNumber,
                  "clientType": "SHIPPER",
                  "codeType": "BIND_BANK"
                },
                    (responseData)  {
                  setState(() {
                    curentTimer=60;
                    _timer =Timer.periodic(Duration(seconds: 1), (timer) {
                      curentTimer--;
                      if (curentTimer ==0){
                        _timer.cancel();
                        print(widget.phoneNumber);
                      }
                    });
                  });
                },
              );
            },
          ),
        ),


    );
  }
}